<div class="loader-container card-loader-container" id="loader" ng-show="challenge.isExistLoader" class="fade">
    <div class="loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<section class="ev-sm-container ev-view challenge-container">
    <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
        <div class="row margin-bottom-cancel">
            <div class="col s12">
                <h5 class="w-300">Leaderboard</h5>
            </div>
        </div>
        <div class="row" ng-if="challenge.page.leaderboard_description.length">
            <div class="col s12 md-body-1 fs-16 w-300" mathjax-bind="challenge.page.leaderboard_description"></div>
        </div>
        <div class="row">
            <div ng-click="challenge.refreshSubmissionData()" class="pointer update-page"
                ng-if="challenge.showLeaderboardUpdate">
                <span class="text-white">Page is outdated, click to update&nbsp; <i
                        class="fa fa-refresh text-highlight"></i></span>
            </div>
        </div>
        <div class="row">
            <div class="col xs12 s6">
                <span>
                    <md-select ng-model="challenge.phaseName" placeholder="Select Phase" class="rm-margin">
                        <md-option ui-sref="web.challenge-main.challenge-page.phase-leaderboard({phaseSplitId:key.id})"
                            value="{{key.id}}" ng-repeat="key in challenge.phaseSplits" ng-show="{{key.visibility}}">
                            <span class="fs-16 w-300">Phase:
                            </span>{{key.challenge_phase_name}}, <span class="fs-16 w-300">Split: </span>
                            {{key.dataset_split_name}} &nbsp; <span class="new badge orange-background"
                                data-badge-caption="Private" ng-if="key.showPrivate"></span></md-option>
                        <md-option value="leaderboard is private" ng-if="challenge.isChallengeLeaderboardPrivate">Leaderboard is private</md-option>
                    </md-select>
                </span>
            </div>
        </div>
        <div class="row" ng-if="challenge.isMultiMetricLeaderboardEnabled[challenge.phaseSplitId]">
            <div class="col xs12 s6">
                <span>
                    <md-select ng-model="challenge.orderLeaderboardBy" placeholder="Order by metric" class="rm-margin">
                        <md-option value="{{key}}" ui-sref="web.challenge-main.challenge-page.phase-metric-leaderboard({phaseSplitId:challenge.phaseSplitId, metric:challenge.encodeMetricURI(key)})"
                         ng-repeat="key in challenge.phaseSplitLeaderboardSchema[challenge.phaseSplitId].labels">
                            <span class="fs-16 w-300">{{key}}</span>
                    </md-select>
                </span>
            </div>
        </div>
        <div class="row">
            <div class="horizontal-scroll">
                <div class="col s12">
                    <div ng-if="challenge.isResult && challenge.leaderboard.length &&
                                    !challenge.leaderboard.error" class="row">
                        <div class="result-wrn col l2 m4 s12"><span id="baseline-badge-desc"
                                class="new badge orange-background fs-16 w-300" data-badge-caption="B"></span>
                            <span class="fs-16 w-300"> - Baseline</span>
                        </div>
                        <div class="result-wrn col l2 m4 s12">
                            <b><span class="orange-text">*</span></b>
                            <span class="fs-16 w-300"> - Private</span>
                        </div>
                        <div class="result-wrn col l2 m4 s12"><span id="baseline-badge-desc"
                                class="new badge green-background fs-16 w-300" data-badge-caption="V"></span>
                            <span class="fs-16 w-300"> - Verified</span>
                        </div>
                        <div class="align-right result-wrn col l6 m6 s12" ng-if="challenge.isChallengeHost && challenge.showLeaderboardToggle">
                            <input ng-checked="challenge.getAllEntries" type="checkbox" id="getAllEntries" ng-model="challenge.getAllEntries"
                                ng-change="challenge.toggleLeaderboard(challenge.getAllEntries)" />
                            <label for="getAllEntries"></label>
                            <span  class="fs-16 w-300 complete-leaderboard"> {{ challenge.getAllEntriesTestOption }}</span>
                        </div>
                        <md-select name="leaderboarddropDownmenu" class="right" ng-model="challenge.chosenMetrics" placeholder="Visible Metrics" class="rm-margin" md-on-open="challenge.openLeaderboardDropdown()" md-on-close="challenge.openLeaderboardDropdown()" multiple>
                            <md-option value="{{i}}" ng-repeat="(i, key) in challenge.leaderboard[0].leaderboard__schema.labels">
                                <span ng-if="!challenge.leaderboardDropdown" class="fs-16 w-300">Visible Metrics</span>
                                <span ng-if="challenge.leaderboardDropdown" class="fs-16 w-300">{{key}}</span>
                            </md-option>
                        </md-select>
                    </div>
                </div>
                <table ng-if="challenge.isResult && challenge.leaderboard.length" ng-attr-id="leaderboard_table" ng-class="['highlight', {'watermarked': challenge.showBackground}]">
                    <thead>
                        <tr>
                            <td data-field="rank">
                                <a href="#" ng-click="challenge.sortLeaderboard(challenge, 'rank');">
                                    <span class="w-300 fs-20">Rank</span>
                                    <span class="fa-stack fa-1x">
                                        <i class="fa fa-sort-asc fa-stack-1x"
                                            ng-class="challenge.reverseSort && challenge.sortColumn == 'rank'? 'text-dark-black' : 'text-light-black w-300'"></i>
                                        <i class="fa fa-sort-desc fa-stack-1x"
                                            ng-class="!challenge.reverseSort && challenge.sortColumn == 'rank'? 'text-dark-black' : 'text-light-black w-300'"></i>
                                    </span>
                                </a>
                            </td>
                            <td data-field="team">
                                <a href="#" ng-click="challenge.sortLeaderboard(challenge, 'string');">
                                    <span class="w-300 fs-20">Participant team</span>
                                    <span class="fa-stack fa-1x">
                                        <i class="fa fa-sort-asc fa-stack-1x"
                                            ng-class="challenge.reverseSort && challenge.sortColumn == 'string'? 'text-dark-black' : 'text-light-black w-300'"></i>
                                        <i class="fa fa-sort-desc fa-stack-1x"
                                            ng-class="!challenge.reverseSort && challenge.sortColumn == 'string'? 'text-dark-black' : 'text-light-black w-300'"></i>
                                    </span>
                                </a>
                            </td>
                            <td ng-repeat="(i, key) in challenge.leaderboard[0].leaderboard__schema.labels track by $index" ng-if="challenge.chosenMetrics.indexOf($index.toString()) !== -1">
                                <a href="#"
                                    ng-click="$parent.challenge.sortLeaderboard($parent.challenge, 'number', $index);">
                                    <span class="w-300 fs-20 leaderboard-label" ng-if="challenge.isMetricOrderedAscending(key) && key != challenge.orderLeaderboardBy ">{{key}} (&#x2193;) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
                                    <span class="w-300 fs-20 leaderboard-label" ng-if="!challenge.isMetricOrderedAscending(key) && key != challenge.orderLeaderboardBy">{{key}} (&#x2191;) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
                                    <span class="w-400 fs-20 leaderboard-label" ng-if="challenge.isMetricOrderedAscending(key) && key == challenge.orderLeaderboardBy ">{{key}} (&#x2193;) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
                                    <span class="w-400 fs-20 leaderboard-label" ng-if="!challenge.isMetricOrderedAscending(key) && key == challenge.orderLeaderboardBy">{{key}} (&#x2191;) <span class="description" ng-if="challenge.getLabelDescription(key).length != 0">{{challenge.getLabelDescription(key)}}</span></span>
                                    <span class="fa-stack fa-1x">
                                        <i class="fa fa-sort-asc fa-stack-1x"
                                            ng-class="$parent.challenge.reverseSort && $parent.challenge.sortColumn == 'number' && $parent.challenge.columnIndexSort == $index ? 'text-dark-black' : 'text-light-black w-300'"></i>
                                        <i class="fa fa-sort-desc fa-stack-1x"
                                            ng-class="!$parent.challenge.reverseSort && $parent.challenge.sortColumn == 'number' && $parent.challenge.columnIndexSort == $index ? 'text-dark-black' : 'text-light-black w-300'"></i>
                                    </span>
                                </a>
                            </td>
                            <td ng-if="challenge.selectedPhaseSplit.show_execution_time" data-field="execution_time">
                                <a href="#"
                                ng-click="challenge.sortLeaderboard(challenge, 'exec');">
                                <span class="fs-20 w-300">Execution time</span>
                                <span class="fa-stack fa-1x">
                                    <i class="fa fa-sort-asc fa-stack-1x"
                                        ng-class="challenge.reverseSort && challenge.sortColumn == 'exec' ? 'text-dark-black' : 'text-light-black w-300'"></i>
                                    <i class="fa fa-sort-desc fa-stack-1x"
                                        ng-class="!challenge.reverseSort && challenge.sortColumn == 'exec'  ? 'text-dark-black' : 'text-light-black w-300'"></i>
                                </span>
                            </a>      
                            </td>
                            <td data-field="submission_time">
                                <a href="#" ng-click="challenge.sortLeaderboard(challenge, 'date');">
                                    <span class="fs-20 w-300">Last submission at</span>
                                    <span class="fa-stack fa-1x">
                                        <i class="fa fa-sort-asc fa-stack-1x"
                                            ng-class="challenge.reverseSort && challenge.sortColumn == 'date'? 'text-dark-black' : 'text-light-black w-300'"></i>
                                        <i class="fa fa-sort-desc fa-stack-1x"
                                            ng-class="!challenge.reverseSort && challenge.sortColumn == 'date'? 'text-dark-black' : 'text-light-black w-300'"></i>
                                    </span>
                                </a>
                            </td>
                            <td data-field="" ng-if="challenge.showSubmissionMetaAttributesOnLeaderboard">
                                <span class="fs-20 w-300">Meta Attributes</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody class="fs-16 w-300">
                        <tr ng-click="challenge.highlightSpecificLeaderboardEntry('leaderboardrank-' + challenge.initial_ranking[key.id])"
                            ng-repeat="key in challenge.leaderboard|orderBy:challenge.sortFunction:challenge.reverseSort"
                            class="fs-16" id="leaderboardrank-{{challenge.initial_ranking[key.id]}}">
                            <td>{{challenge.initial_ranking[key.id]}}</td>
                            <td><a ng-if="key.submission__participant_team__team_url" class="orange-text"
                                    target="_blank"
                                    href="{{key.submission__participant_team__team_url}}">{{key.submission__participant_team__team_name}}</a><span
                                    ng-if="!key.submission__participant_team__team_url">{{key.submission__participant_team__team_name}}</span>
                                    <b><span ng-if="key.submission__is_public === false" class="orange-text">*</span></b>
                                <span
                                    ng-if="key.submission__method_name">({{key.submission__method_name | limitTo:30}})</span><span
                                    id="baseline-badge" class="new badge orange-background baseline-tag" data-badge-caption="B"
                                    ng-if="key.submission__is_baseline"></span>
                                <span
                                    id="verified-badge" class="new badge green-background baseline-tag" data-badge-caption="V"
                                    ng-if="key.submission__is_verified_by_host"></span>
                            </td>
                            <td ng-repeat="(i, score) in key.result track by $index" ng-if="challenge.chosenMetrics.indexOf($index.toString()) !== -1">
                                <span class="w-400 fs-16" ng-if="challenge.leaderboard[0].leaderboard__schema.labels[i] == challenge.orderLeaderboardBy">{{score | number : challenge.selectedPhaseSplit.leaderboard_decimal_precision}}</span>
                                <span class="w-300 fs-16" ng-if="challenge.leaderboard[0].leaderboard__schema.labels[i] != challenge.orderLeaderboardBy">{{score | number : challenge.selectedPhaseSplit.leaderboard_decimal_precision}}</span>
                                <span class="new badge orange-background fs-16 w-300 partial-evaluation"
                                      data-badge-caption="E" ng-if="score === '#'"></span>
                                <span ng-if="key.error != nil"> ±
                                    {{key.error[i] | number : challenge.selectedPhaseSplit.leaderboard_decimal_precision}}</span>
                            </td>
                            <td ng-if="challenge.selectedPhaseSplit.show_execution_time">{{ key.submission__execution_time | format_execution_time }}</td>
                            <td>{{ key.submission__submitted_at | number: 0}}&nbsp;{{key.timeSpan}} ago
                            </td>
                            <td ng-if="challenge.showSubmissionMetaAttributesOnLeaderboard">
                                <button class="btn ev-btn-dark waves-effect waves-dark grad-btn fs-14" ng-disabled="key.submission__submission_metadata == undefined || key.submission__submission_metadata == null;" type="submit" value="view" ng-click="challenge.showMetaAttributesDialog($event, key.submission__submission_metadata);">View</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div ng-if="challenge.isResult && challenge.leaderboard.error">
                    <p class="fs-16 w-300">{{challenge.leaderboard.error.error}}</p>
                </div>
                <div ng-if="challenge.isResult && !challenge.leaderboard.length && !challenge.leaderboard.error">
                    <p class="fs-16 w-300">No results to show.</p>
                </div>
            </div>
        </div>
    </div>
</section>
